<!--
 * @Description: 条件渲染
 * @Author: admin
 * @Date: 2021-06-10 10:27:27
 * @LastEditors: admin
 * @LastEditTime: 2021-06-10 11:30:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件渲染</title>
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>
<script type="text/babel">
  // 函数组件
  function Logged(props){
      return <h1>Hello,欢迎登录</h1>;
  }
  function Unlogged(props){
      return <h1>请先登录</h1>;
  }
  function App(props){
    const isLoginIn = props.isLoginIn;
    
    if (isLoginIn) {
      return <Logged/>
    }else{
      return <Unlogged/>
    }
  }
  // 登录和注销按钮
  function LoginButton(props) {
    return(
      <button onClick={props.onClick}>
        登录
      </button>
    );
  }
  function LogoutButton(props) {
    return(
      <button onClick={props.onClick}>
      注销
      </button>
    );
  }
  class LoginControl extends React.Component{
    constructor(props){
      super(props)
      this.handleLoginClick = this.handleLoginClick.bind(this);
      this.handleLogoutClick = this.handleLogoutClick.bind(this);
      this.state = {isLoginIn:false}
    }
    handleLoginClick(){
      this.setState({isLoginIn:true});
    }
    handleLogoutClick(){
      this.setState({isLoginIn:false});
    }
    render(){
      const isLoginIn = this.state.isLoginIn;
      let button;
      if ((isLoginIn)) {
        button = <LogoutButton onClick={this.handleLogoutClick} />
      } else {
        button = <LoginButton onClick={this.handleLoginClick} />
      }
      return (
        <div>
          <App isLoginIn={isLoginIn} />
          {button}
        </div>
      )
    }
  }
  // 渲染组件
  ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
  )

</script>

</html>